<!--
 * @Description: 首页
 * @Author: 陈三愿
 * @Date: 2025-09-14 23:00:00
 * @LastEditTime: 2025-09-15 01:00:00
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 统计数据（初始为空数组）
const stats = ref([]);

// 最近活动（初始为空数组）
const activities = ref([]);

// 加载状态（初始为 true，表示正在加载）
const isLoading = ref(true);

// 模拟异步数据加载
onMounted(() => {
  // 模拟 1 秒的延迟加载
  setTimeout(() => {
    // 填充统计数据
    stats.value = [
      { title: '用户总数', value: '1,234', icon: 'users', color: 'bg-primary' },
      { title: '今日访问', value: '567', icon: 'chart', color: 'bg-secondary' },
      { title: '新增订单', value: '89', icon: 'shopping-cart', color: 'bg-accent' },
      { title: '收入', value: '¥12,345', icon: 'currency-yen', color: 'bg-info' },
    ];
    // 填充最近活动数据
    activities.value = [
      { user: '张三', action: '创建了新订单', time: '10分钟前' },
      { user: '系统', action: '执行了数据备份', time: '1小时前' },
      { user: '李四', action: '更新了个人资料', time: '2小时前' },
      { user: '王五', action: '发表了新评论', time: '昨天' },
    ];
    // 标记加载完成
    isLoading.value = false;
  }, 1000);
});
</script>

<template>
  <div>
    <h1 class="text-2xl font-bold mb-4">仪表盘</h1>
    
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
      <template v-if="isLoading">
        <div v-for="i in 4" :key="i" class="card bg-base-100 shadow-xl">
          <div class="card-body p-4">
            <div class="flex items-center">
              <div class="rounded-full p-3 mr-4 bg-gray-200 animate-pulse">
                <div class="w-6 h-6"></div>
              </div>
              <div class="w-full">
                <div class="h-4 bg-gray-200 rounded w-3/4 mb-2 animate-pulse"></div>
                <div class="h-6 bg-gray-200 rounded w-1/2 animate-pulse"></div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div v-for="(stat, index) in stats" :key="index" class="card bg-base-100 shadow-xl">
          <div class="card-body p-4">
            <div class="flex items-center">
              <div :class="['rounded-full p-3 mr-4', stat.color]">
                <div class="w-6 h-6"></div>
              </div>
              <div>
                <div class="text-sm opacity-70">{{ stat.title }}</div>
                <div class="text-2xl font-bold">{{ stat.value }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 图表卡片 -->
      <div class="card bg-base-100 shadow-xl lg:col-span-2">
        <div class="card-body">
          <h2 class="card-title">访问统计</h2>
          <div class="h-64 flex items-center justify-center bg-base-200 rounded-box">
            <p class="text-center text-base-content opacity-70">这里将显示访问统计图表</p>
          </div>
        </div>
      </div>
      
      <!-- 最近活动 -->
      <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
          <h2 class="card-title">最近活动</h2>
          <ul class="space-y-3">
            <li v-for="(activity, index) in activities" :key="index" class="border-b border-base-300 pb-2 last:border-0">
              <div class="font-medium">{{ activity.user }}</div>
              <div class="text-sm opacity-70">{{ activity.action }}</div>
              <div class="text-xs opacity-50">{{ activity.time }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>